import React from 'react';

// 目标：类组件状态 state

class Btn extends React.Component{

  // state 状态 - 类似于 Vue 的 data
  state = {
    msg: '未登录'
  }
  // 生命周期函数
  componentDidMount(){
    // ❎不要用这种赋值的写法更新 state 数据
    // this.state.msg =  666;
    // ✔正确的写法：使用 this.setState() 
    setTimeout(() => {
      this.setState({ msg : '已登录' });
    }, 1000);
  }

  render(){
    console.log(this);
    return (
      // 获取 state 值需要通过 this.state.xxx 获取
      <button>按钮 {this.state.msg} </button>
    )
  }
}

// 函数式组件 App
function App() {
  return (
    <div className="App">
      <Btn></Btn>
    </div>
  );
}

export default App;
